<template>
  <div class="chooseCar">
    <carnt-header :text="title" backPage="spray"></carnt-header>
    <div class="allCar" :style="{height:heights+'rem'}">
      <div class="cars" v-for="(item,index) in cars">
        <div class="carAllMess"  @click.stop="select(item.CAR_ID,item)">
          <div class="select" :class="{on:item.CAR_ID==$store.state.carId}"></div>
          <!-- <div class="select" :class="{on:item.CAR_ID==selectId}" @click.stop="select(item.CAR_ID,item)"></div> -->
          <img :src="address+item.SICON" />
          <div class="carMess" >
            <p class="carMessName">{{item.LICENCE}}</p>
            <p class="carMessX">{{item.BRAND}}-{{item.SET}}</p>
          </div>
        </div>
        <div class="chooseCarR"  @click="editCar(item.CAR_ID,item.BRAND_ID,item.SET_ID,item.MODEL_ID)">
          <img src="../assets/img/chooseCar/rightGo.png">
        </div>
      </div>
    </div>
    <div class="addCar" @click="addCar">
      <img src="../assets/img/chooseCar/car.png">
      <span> 添加爱车</span>

    </div>
  </div>
</template>

<script>
import carntHeader from './commonParts/CarntHeader';
import { getCookie, setCookie } from '../assets/js/cookie';
export default {
  name: 'chooseCar',
  // 数据
  data () {
    return {
      msg: '车辆选择',
      title: '填写车辆信息',
      cars:"",
      address:"",
      heights:0,
    }
  },
  beforeRouteEnter (to, from, next) {

    next(vm => {

      if(localStorage.getItem('carNetLink') && from.path!="/"){
          if(localStorage.getItem("selectIds")){
            vm.$store.dispatch('setCarId',localStorage.getItem("selectIds"));
            vm.$store.dispatch('setDefaultCatAllInfo',JSON.parse(localStorage.getItem("selectMess")));
         }
      }
    })
  },
  // 创建
  created () {
     //这个高度测得辛苦啊 
     this.heights = window.screen.height*1.3/100;
     localStorage.removeItem("backAddress");
     localStorage.removeItem("flag");
     let _this=this;
     let carPort=this.$store.state.ip+"/CARNT/UserWeb/getCars";
     //获取用户的id
     let userId=Number(getCookie("loginkey"));
     //请求用户的所有车辆
     this.$http.post(carPort,{"USER_ID":userId},{emulateJSON:true}).then(function(res){
        _this.address=res.body.CAR_LOGO_URL;
        _this.cars=res.body.CARS.filter(function(item){
          return item.BRAND!="未设置";
        });
        //_this.logoImg=res.body.CAR_LOGO_URL;//保存车辆logo的公共路径
        //document.cookie.split(",")
        //通过cookies拿到当前用户的默认车辆
        // let str="DWRSESSIONID=n9*Ob9MRNhupoVeKQ2YjCRhM5Kl; JSESSIONID=846FF53161498E38C47750A5DD200770; name=17770272793; pwd=140610; loginkey=223750; userAvatar=; userName=17770272793; 223750=1395%2C%u7CA4T5555%2C17770272793; flag=6";
        // let arr=str.replace(/\s/gi,"").split(";");
        // let newArr=[];
        // for(var i=0;i<arr.length;i++){
        //   let eArr=arr[i].split("=");
        //   let obj={};
        //   obj[eArr[0]]=eArr[1];
        //   newArr.push(obj);
        // }
        // let loginValue;
        // let selectCarId;
        // for(let i=0;i<newArr.length;i++){
        //   for(var key in newArr[i]){
        //     if(key=="loginkey"){
        //       loginValue=newArr[i][key];
        //       console.log(loginValue)
        //     }
        //   }
        //   for(var key in newArr[i]){
        //     if(key==loginValue){
        //       let Arr=newArr[i][key];
        //       let selectArr=Arr.split("%");
        //       selectCarId=selectArr[0];
        //       console.log(selectCarId);
        //     }
        //   }
        // }
     })
  },
  // 渲染
  mounted () {

  },
  // 销毁前
  beforeDestory () {

  },
  // 计算
  computed: {

  },
  // 方法
  methods: {
    addCar(){
      //车网通carModel.jsp中所需要的获取的flag来控制其跳转
      localStorage.setItem("flag","mycar");
      localStorage.setItem("backAddress",this.$store.state.ip+"/CARNT/jsp/pay/index.html#/");
      //车网通carModel.jsp中所需要的获取的flag来控制其跳转
      location.href=this.$store.state.ip+"/CARNT/jsp/maintain/carBrand.jsp";
      //当跳出当前vue项目是存储当前选择的车辆的id和信息
      localStorage.setItem("selectIds",this.$store.state.carId);
      localStorage.setItem("selectMess",JSON.stringify(this.$store.state.defaultCatAllInfo));
    },
    editCar(carid,brand_id,set_id,model_id){

      // 存储进入编辑的前的页面，这样可以让编辑完返回当前页面  ()
      localStorage.setItem("backAddress",this.$store.state.ip+"/CARNT/jsp/pay/index.html#/chooseCar");
      //编辑车辆存储的sessionStorage以及跳转路径   将车网通编辑车辆页面中所需要的所有信息存储在sessionStorage
      location.href=this.$store.state.ip+"/CARNT/jsp/mycar/editmycar.jsp";
      sessionStorage.setItem("brand_id",brand_id);
      sessionStorage.setItem("set_id",set_id);
      sessionStorage.setItem("model_id",model_id);
      sessionStorage.setItem("mycarusage","1");//添加是0，编辑1
      sessionStorage.setItem("carid",carid);//设置当前点击车辆的carid
      //当跳出当前vue项目是存储当前选择的车辆的id和信息
      localStorage.setItem("selectIds",this.$store.state.carId);
      localStorage.setItem("selectMess",JSON.stringify(this.$store.state.defaultCatAllInfo));
    },
    select(t,item){
      // 将修改后的车辆的信息保存到store中这样spray中的选择的车辆也会发生相应的变化
      this.selectId=t;
      item.CAR_LOGO_URL=this.address;
      this.$store.dispatch('setCarId',t);
      this.$store.dispatch("setDefaultCatAllInfo",item);
      localStorage.setItem("selectIds",t);
      localStorage.setItem("selectMess",JSON.stringify(item));
      localStorage.setItem('addCarId','');
      // this.$router.push("/spray")
      this.$router.push("/")
    }
  },
  // 子组件
  components: {
    carntHeader
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.chooseCar{
  width: 7.5rem;
  .allCar{
    overflow: scroll;
  .cars{
    height:1.25rem;
    border-bottom: 1px solid #f6f6f6;
    background: #fff;
    display: flex;
    .carAllMess{
      width: 80%;
      display: flex;
      .select{
        width: .6rem;
        height: 1.25rem;
        background: url(../assets/img/chooseCar/noChecked.png) no-repeat center right;
        background-size: .42rem .42rem;
      }
      .select.on{
        background: url(../assets/img/chooseCar/checked.png) no-repeat center right;
        background-size: .42rem .42rem;
      }
      img{
        margin:0 .25rem;
        width: .9rem;
        height:.9rem;
        padding:.17rem 0;
      }
      .carMess{
        width: 4.4rem;
        .carMessName{
          font-size: .3rem;
          font-weight: bold;
          color: #000;
          margin: .2rem 0 .05rem 0;
        }
        .carMessX{
          font-size: .28rem;
          color:#666;
          white-space: nowrap;
          text-overflow:ellipsis;
          overflow:hidden;
        }
      }

    }
    .chooseCarR{
        width: 20%;
        text-align: right;
        padding-right: .30rem;
        box-sizing: border-box;
        img{
          width: .19rem;
          height:.32rem;
          margin-top: .46rem;
        }
      }
  }
}
  .addCar{
    width: 6.76rem;
    height: .85rem;
    color: #fff;
    background:#e42f3b;
    position: absolute;
    left:50%;
    bottom:.5rem;
    transform:translateX(-50%);
    text-align: center;
    line-height: .85rem;
    border-radius: .1rem;
    span{
      font-size: .28rem;
      margin-left: .05rem;
      font-weight: bold;
      letter-spacing: 1.3;
      vertical-align: middle;
    }
    img{
      width:.56rem;
      height:.39rem;
      vertical-align: middle;
    }
  }
}
</style>
